<template>
  <f7-page>
    <f7-navbar :title="$t('m.m1')" back-link=" "></f7-navbar>

    <ul class="product-list">
      <li v-for="(item, index) in goodsList" :key="index">
        <f7-link :href="`/product-details/?id=${item.id}`" class="my-card product-item">
          <img :src="item.pic" onerror="onerror=null;src='../static/avatar.jpg'" alt="">
          <div>
            <h3>{{item.name}}</h3>
            <h2>{{item.price}} {{$t('m.m2')}}</h2>
<!--            <p>{{(item.price / zolPrice).toFixed(2)}} ZOL</p>-->
          </div>
        </f7-link>
      </li>
    </ul>
  </f7-page>
</template>

<script>
  import { getGoodsList } from "../api/find";

  export default {
    name: "mall",
    data() {
      return {
        goodsList: []
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        getGoodsList().then(res => {
          this.goodsList = res.data;
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .product-list {
    margin: $padding;
    li {
      margin-bottom: $padding20;
    }
  }
</style>
